<template>
    <Modal :mask-closable="false" v-model="visible" :title="title" width="800px">
        <Form ref="form" v-if="visible" class="formList" :model="form" label-position="top" :rules="rules">
            <Row :gutter="16">
                <Col span="12">
                <FormItem label="计划开始时间-计划结束时间" required prop="planBeginTime">
                    <DatePicker format="yyyy-MM-dd" type="datetimerange" v-model="form.planBeginTime"
                        placeholder="请选择起始时间和结束时间" />
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem label="工厂/车间" required prop="organizationId">

                    <Cascader clearable :data="lineList" v-model="form.organizationId" placeholder="请选择"
                        change-on-select>
                    </Cascader>
                </FormItem>
                </Col>
            </Row>

            <Row :gutter="16">

                <Col span="12">
                <FormItem label="计划类型" required prop="type">
                    <Select v-model="form.type" placeholder="请输入计划类型">
                        <Option v-for="(item, index) in typeData" :key="index.value" :value="item.value"
                            :label="item.label"></Option>
                    </Select>

                </FormItem>
                </Col>
            </Row>



            <template v-for="(item, index) in form.keys">

                <Row :key="index" :gutter="16">
                    <Col span="12">
                    <FormItem :key="index" :label="'产品名称'" :prop="'productId' + index">
                        <Row>
                            <Select v-model="item.productId" placeholder="请选择产品名称"
                                @on-change="(e) => { changeProduct(e, index, item) }">
                                <Option v-for="(i, inx) in productData" :key="inx.id" :value="i.id"
                                    :label="i.productName">
                                </Option>
                            </Select>
                        </Row>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem :key="index" :label="'路线名称'" :prop="'processRouteId' + index">
                        <Row>
                            <Select v-model="item.processRouteId" placeholder="请选择路线名称">
                                <Option v-for="(i, inx) in item.allRouteData" :key="inx.id" :value="i.id"
                                    :label="i.processName">
                                </Option>
                            </Select>
                        </Row>
                    </FormItem>
                    </Col>
                </Row>
                <Row :key="index" :gutter="16">
                    <Col span="12">
                    <FormItem :key="index" :label="'物料bom名称'" :prop="'bomId' + index">
                        <Row>
                            <Select v-model="item.bomId" placeholder="请选择物料bom名称">
                                <Option v-for="(i, inx) in item.materialBom" :key="inx.id" :value="i.id"
                                    :label="i.materialBomName">
                                </Option>
                            </Select>
                        </Row>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem :key="index" :label="'下发数量'" :prop="'planCount' + index">
                        <Input type="number" v-model="item.planCount" placeholder="请输入下发数量" class="inputBorder"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row :key="index">
                    <Col span="24" offset="22">
                    <Button type="primary" size="small" icon="ios-close-circle-outline"
                        @click="handleRemove(index)"></Button>
                    </Col>
                </Row>



            </template>
            <FormItem>
                <Row>
                    <Col span="12" offset="5">
                    <Button type="dashed" long @click="handleAddItem" icon="md-add">添加产品</Button>
                    </Col>
                </Row>
            </FormItem>

        </Form>
        <div slot="footer" v-if="visible">
            <Button type="default" @click="closeModal">取消</Button>
            <Button type="primary" @click="handleSubmit('form')">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "CreateOrUpdateModal",
    props: {
        visible: Boolean,
        form: Object,
        title: String,
        handleAddSubmit: Function,
        lineList: Array,
        statusData: Array,
        typeData: Array,
        productData: Array,
        materialData: Array,
        allRouteData: Array,
        keysArray: Function,
    },
    data() {
        return {
            rules: {  
            planBeginTime: [  
                { required: true, message: '请选择计划开始时间-计划结束时间', trigger: 'change' }  
            ],  
            organizationId: [  
                { required: true, message: '请选择工厂/车间', trigger: 'change' }  
            ],  
            type: [  
                { required: true, message: '请选择计划类型', trigger: 'change' }  
            ],  
            dynamicRules: {}  , 用于动态添加验证规则  
        },  

            // allRouteData: [],
            materialBom: []
        };
    },
    methods: {

        handleAddItem() {
   
      this.index++;
      if (this.form.keys) {
        this.form.keys.push({
          value: "",
          index: this.index,
          status: 1,
        });
      } else {
        this.form = {
          ...this.form,
          keys: [
            {
              value: "",
              index: this.index,
              status: 1,
            },
          ],
        };
      }
    },        handleRemove(index) {
            this.form.keys.splice(index, 1)
        },
        changeProduct(e, index) {
            this.keysArray(e, index)

        },
        closeModal() {
            this.$emit("update:visible", false);
        },
        handleSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleAddSubmit(formName);
                }
            })

        },
    },
};
</script>

<style scoped>
.buttonFlex {
    width: 100%;
    padding: 10 px 20px;
    padding: 5px;
    display: flex;
    align-items: center;
    font-size: 16px;

}

.buttonFlexButton {
    width: 100%;
    display: flex;
    flex-direction: right;

}
</style>
